<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇</title>
    <style>
        .box{
            width: 360px;
            height: 420px;
            background-color: bisque;
            margin:100px auto;

            display: flex;
            flex-flow:column;
            align-items:center;
            justify-content: center;
            border-radius: 40px;
            border:10px solid black
        }
        .place{
            position: relative;
            width: 304px;
            height: 304px;
            border: 1px solid black;
        }
        .food{
            position: absolute;
            left: 100px;
            height: 100px;
            width: 10px;
            height: 10px;
            display:flex;
            flex-wrap: wrap;
            justify-content: space-around;
            /* background-color: red; */
        }
        .food div{
            width: 4px;
            height: 4px;
            background-color: black;
            transform: rotate(45deg);

        }
        .footer{
            /* flex布局弹性容器必须得设置宽度，不然其大小只会被文字撑开 */
            width: 304px;
            display:flex;
            flex-direction: row;
            justify-content:space-between;
        }
        /* h3:nth-child(1){
            flex: 1;
        }
        h3:nth-child(2){
            flex: 1;
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="place">
            <div class="food">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="footer">
            <h3>SCORE:3</h3>
            <h3>LEVEL:1</h3>
        </div>
    </div>
</body>
</html>